import { createEffect, createSignal } from "solid-js";
import { render } from "solid-js/web";

console.log("log in Module");

export const App = () => {
  const [getCount, setCount] = createSignal(0);
  createEffect(() => {
    console.log("count changed", getCount());
  });
  return (
    <div class="content">
      <h1>Solid</h1>
      <p>Start building amazing things with Webpack + Babel.</p>

      <div class="count">
        <p class="count__value">{getCount()}</p>
        <button
          class="count__button"
          onClick={() => setCount((prev) => prev + 1)}
        >
          +
        </button>
        <button
          class="count__button"
          onClick={() => setCount((prev) => prev - 1)}
        >
          -
        </button>
      </div>
    </div>
  );
};

export const appRender = (id: string) => {
  render(() => <App />, document.getElementById(id)!);
};
